<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>商城</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/mall.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tabbar.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mall.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div id="slideBar">
	<a class="shopCar flex-col" href="shopCar.html">
		<span class="icon"><img src="image/icon/slide-icon.png" /></span>
		<span class="num">5</span>
	</a>
	<a class="contact flex-col" href="tel:110">
		<span class="icon"><img src="image/icon/slide-icon.png" /></span>
	</a>
</div>

<footer class="footer flex-row top-line main-line" id="tabbar">
	<dl class="flex-col flex-full" @click="bottomTab(0)">
		<dt></dt>
		<dd>发现</dd>
	</dl>
	<dl class="flex-col flex-full active" @click="bottomTab(1)">
		<dt></dt>
		<dd>商城</dd>
	</dl>
	<dl class="flex-col flex-full" @click="bottomTab(2)">
		<dt></dt>
		<dd>我的</dd>
	</dl>
</footer>

<div class="swiper-container Main" id="Main">
	<div class="swiper-wrapper">
		<div class="swiper-slide content">
			
			<div class="children" id="mall">
				
				<!--banner-->
				<div class="swiper-container bg-g" id="banner" data-rate='15/8'>
					<div class="swiper-wrapper">
						<div class="swiper-slide cover" v-for='(item,index) in bannerData'>
							<a :href="item.url"><img :src="item.path" alt="" /></a>
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
				<!--banner end-->
				
				<!--advantage-->
				<div class="advMod flex-row">
					<ul class="flex-full flex-row">
						<li class="icon icon_1"></li>
						<li class="name dm-wrap">正品保障</li>
					</ul>
					<ul class="flex-full flex-row">
						<li class="icon icon_2"></li>
						<li class="name dm-wrap">环保放心</li>
					</ul>
					<ul class="flex-full flex-row">
						<li class="icon icon_3"></li>
						<li class="name dm-wrap">专业安装</li>
					</ul>
					<ul class="flex-full flex-row">
						<li class="icon icon_4"></li>
						<li class="name dm-wrap">卓越品质</li>
					</ul>
				</div>
				<!--advantage end-->
				
				<div class="search-mod bg-w">
					<a class="search" href="search.html">搜索商品</a>
				</div>
				<!--分类-->
				 <div class="MainlistMod bg-w dm-clearfix" v-if="listData.length>0">
					<dl class="dm-left" v-for="(item,index) in listData" @click="skipProList(item.id)" v-if="index<8">
						<dt class="icon cover" data-rate="1">
							<img :src="item.path" />
						</dt>
						<dd class="name">{{item.name}}</dd>
					</dl>
				</div> 
				<!--分类 end-->
				<div class="bg-w sale-active">
					<a href="#">
						<img src="image/test/sale-active.jpg" />
					</a>
				</div>
				
				<!--精选推荐-->
				<div class="mall-mod">
					<div class="bt flex-row">精选推荐<span class="more"></span></div>
					<div class="recommend-wrap dm-clearfix">
						<a href="#"><img src="image/test/recommend-1.jpg" alt="" /></a>
						<a href="#"><img src="image/test/recommend-2.jpg" alt="" /></a>
						<a href="#"><img src="image/test/recommend-3.jpg" alt="" /></a>
						<a href="#"><img src="image/test/recommend-4.jpg" alt="" /></a>
					</div>
				</div>
				
				<!--新品来袭-->
				<div class="mall-bt mall-new">
					<img src="image/icon/mall-new-bg.png" />
					<div class="flex-col txt">
						<span class="big">新品来袭</span>
						<span class="small">New product incoming</span>
					</div>
				</div>
				<div class="newMod bg-w dm-mb">
					<div class="flex-inline" style="padding-right: 12px;">
						<ul class="box" v-for="(item,index) in goodData" @click="location.href='productDetail.html?proId='+item.id">
							<li class="photo cover">
								<img :src="item.path" />
							</li>
							<li class="tag dm-clearfix">
								<span class="tag-1 dm-left">限时特惠</span>
								<span class="tag-2 dm-left">送烟机灶具</span>
							</li>
							<li class="name dm-wrap">{{item.name}}</li>
							<li class="val">￥{{item.val}}</li>
						</ul>
					</div>
				</div>
				
				<!--人气推荐-->
				<div class="mall-bt mall-hot">
					<img src="image/icon/mall-hot-bg.png" />
					<div class="flex-col txt">
						<span class="big">人气推荐</span>
						<span class="small">New product incoming</span>
					</div>
				</div>
				<div class="hotMod bg-w dm-clearfix dm-mb">
					<div class="big dm-left cover" data-rate='0.8'>
						<a href="">
							<img src="image/test/hot-big.png" />
						</a>
					</div>
					<div class="dm-right box">
						<div class="sml cover" data-rate='1.84'>
							<a href="">
								<img src="image/test/hot-sml-1.png" />
							</a>
						</div>
						<div class="sml cover" data-rate='1.84'>
							<a href="">
								<img src="image/test/hot-sml-2.png" />
							</a>
						</div>
					</div>
				</div>
				
				<!--居家好物-->
				<div class="mall-mod">
					<div class="bt flex-row">居家好物<span class="more"></span></div>
					<!--商品列表-->
					<div class="proMod dm-clearfix">
						<dl class="dm-left" v-for="item in goodData" @click="location.href='productDetail.html?proId='+item.id">
							<dt class="pt cover" data-rate='1'>
								<img :src="item.path" />
							</dt>
							<dd>
								<h5 class="name dm-wrap">{{item.name}}</h5>
								<div class="val">￥<span>{{item.val}}</span></div>
							</dd>
						</dl>
					</div>
					<!--商品列表 end-->
				</div>
				
			</div>
			
		</div>
	</div>
</div>

</body>
</html>
